<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多层组件</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

<script>
  const { createApp, h, createVNode, render,reactive } = VueRuntimeDOM;

  // 组件如何更新呢？
  // 可能是自身数据变化 也可能是外界属性变化引起的更新
  // issue:
  // 父给儿子传入属性 儿子是否更新? 父传给儿子的属性变化了（即使组件的视图没有用到） 会更新一次
  // 儿子使用了属性 属性变化了要不要更新? 如果组件ui中用到了传来的属性 又会更新一次 (这一次 在内部会被移除掉 防止更新两次

  const My = {
    props:{
      name:String
    },
    render() {
      console.log('子组件render')
      return h('p',this.name)
    }
  }
  const App = {
    setup(){
      const state = reactive({name:'ahhh'});

      setTimeout(() => {
        state.name = 'jim'
        // 此时父组件更新状态
        // ---> 父组件更新
        // ---> 产生父组件对应的新的subtree虚拟节点(div)
        // ---> 比对前后两个subtree的外层div processElement ---> patchElement ---> patchChildren
        // ---> &ShapeFlags.ARRAY_CHILDREN ---> patchKeyedChildren
        // ---> 再次走patch ---> processComponent ---> updateComponent
      }, 2000);


      return (proxy)=>{
        console.log('父组件render')
        return h('div', {},[h('div',state.name), h(My, {a:1})]) /** ← 改变state.name ,不会触发子组件更新*/
        // return h('div', {},h(My,{name:state.name})) /** ← 会触发更新, 即使我们的My组件中并没有用到父组件传来的state.name, 但只要传来的数据变化就会触发更新*/
      }
    }
  };

  // = createApp().mount();
  const vnode = createVNode(App);
  // debugger
  render(vnode, document.getElementById('app'))

</script>
</body>
</html>
